<template>
  <div class="video-test-container">
    <h1>WebRTC 视频流测试页面</h1>
    
    <div class="test-section">
      <!-- URL 输入区域 -->
      <div class="url-input-section">
        <el-input 
          v-model="webrtcUrl" 
          placeholder="请输入 WebRTC 流地址，例如: webrtc://server.com/live/stream"
          clearable
        >
          <template #prepend>WebRTC URL</template>
        </el-input>
        <el-button type="primary" @click="updateUrl" style="margin-left: 10px">更新地址</el-button>
      </div>

      <!-- WebRTC 播放器组件 -->
      <div class="player-wrapper">
        <WebRTCPlayer
          ref="playerRef"
          :url="currentUrl"
          :autoplay="autoplay"
          :controls="true"
          :muted="true"
          @play="onPlay"
          @error="onError"
          @stateChange="onStateChange"
        />
      </div>

      <!-- 控制按钮 -->
      <div class="controls">
        <el-button type="primary" @click="play">播放</el-button>
        <el-button type="danger" @click="stop">停止</el-button>
        <el-button @click="toggleAutoplay">
          自动播放: {{ autoplay ? '开' : '关' }}
        </el-button>
      </div>

      <!-- 预设地址 -->
      <div class="preset-urls">
        <h3>预设测试地址：</h3>
        <el-button 
          v-for="(preset, index) in presetUrls" 
          :key="index"
          @click="selectPresetUrl(preset.url)"
          size="small"
        >
          {{ preset.name }}
        </el-button>
      </div>

      <!-- 状态信息 -->
      <div class="status-info">
        <p>当前地址：{{ currentUrl || '未设置' }}</p>
        <p>播放状态：{{ playerStatus }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import WebRTCPlayer from '@/components/WebRTCPlayer.vue'

// 播放器引用
const playerRef = ref(null)

// 数据
const webrtcUrl = ref('webrtc://121.40.137.250:1935/live/1581F5FHC245B00D6U7E-66-0-0')
const currentUrl = ref('')
const autoplay = ref(false)
const playerStatus = ref('未初始化')

// 预设地址
const presetUrls = [
  { name: '测试流1', url: 'webrtc://121.40.137.250:1935/live/1581F5FHC245B00D6U7E-66-0-0' },
  { name: 'SRS示例', url: 'webrtc://r.ossrs.net/live/livestream' },
  { name: '本地流', url: 'webrtc://localhost:1985/live/livestream' }
]

// 播放
const play = () => {
  if (playerRef.value) {
    playerRef.value.play()
  }
}

// 停止
const stop = () => {
  if (playerRef.value) {
    playerRef.value.stop()
    playerStatus.value = '已停止'
  }
}

// 更新 URL
const updateUrl = () => {
  if (!webrtcUrl.value) {
    ElMessage.warning('请输入 WebRTC 流地址')
    return
  }
  currentUrl.value = webrtcUrl.value
  ElMessage.success('地址已更新')
}

// 选择预设 URL
const selectPresetUrl = (url) => {
  webrtcUrl.value = url
  currentUrl.value = url
  ElMessage.success('已选择预设地址')
}

// 切换自动播放
const toggleAutoplay = () => {
  autoplay.value = !autoplay.value
}

// 播放器事件处理
const onPlay = (session) => {
  playerStatus.value = '正在播放'
  console.log('播放成功，会话ID:', session.tid)
}

const onError = (error) => {
  playerStatus.value = '播放失败'
  console.error('播放错误:', error)
  ElMessage.error(`播放错误: ${error.message || '未知错误'}`)
}

const onStateChange = (state) => {
  console.log('状态变化:', state)
  if (state === 'playing') {
    playerStatus.value = '正在播放'
  } else if (state === 'stopped') {
    playerStatus.value = '已停止'
  } else if (state === 'error') {
    playerStatus.value = '播放错误'
  }
}

// 初始化时设置默认 URL
currentUrl.value = webrtcUrl.value
</script>

<style lang="scss" scoped>
.video-test-container {
  padding: 20px;
  min-height: 100vh;
  background: #0a0f1b;
  color: #fff;

  h1 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
    color: #409eff;
  }

  .test-section {
    max-width: 1000px;
    margin: 0 auto;
  }

  .url-input-section {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    :deep(.el-input) {
      flex: 1;
      
      .el-input__wrapper {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
      }
      
      .el-input__inner {
        color: #fff;
        
        &::placeholder {
          color: rgba(255, 255, 255, 0.5);
        }
      }
      
      .el-input-group__prepend {
        background-color: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: #409eff;
      }
    }
  }

  .player-wrapper {
    width: 100%;
    height: 500px;
    margin-bottom: 20px;
    border: 2px solid #1a1a1a;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  }

  .controls {
    text-align: center;
    margin-bottom: 20px;

    .el-button {
      margin: 0 10px;
    }
  }

  .preset-urls {
    text-align: center;
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;

    h3 {
      margin-bottom: 15px;
      color: #409eff;
      font-size: 16px;
    }

    .el-button {
      margin: 5px;
    }
  }

  .status-info {
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    
    p {
      margin: 10px 0;
      color: #dcdfe6;
      font-size: 14px;
    }
  }
}
</style>